<script setup>
import AsideNav from './components/AsideNav.vue';
import Header from './components/Header.vue';
import { computed } from 'vue';
import { useRoute, RouterLink  } from 'vue-router'; 
// 获取当前路由对象
const route = useRoute();

// 计算面包屑列表（从路由层级中提取，排除根路由）
const breadcrumbList = computed(() => {
  return route.matched
    .filter(item => item.meta?.title)
    .map(item => ({
      title: item.meta.title, // 从路由meta中取标题
      path: item.path, // 路由路径（用于面包屑跳转）
      iconPath: item.meta.iconPath || ''
    }));
});

const breadcrumbIcon = computed(() => {
  return breadcrumbList.value[0].iconPath || '/icon/paw-sharp-blue.png';
})
</script>

<template>
     <!-- 头部 -->
     <Header/>
     <div class="main">
          <!-- 侧边栏 -->
          <AsideNav/>

          <!-- 主体 -->
       <div class="pet-list">
        <div class="list-top">
          <img :src="breadcrumbIcon" alt="" style="margin-right: 8px;margin-left: 18px;">
           
        <!-- 面包屑容器 -->
        <div class="breadcrumb">
          <span v-for="(item, index) in breadcrumbList" :key="item.path">
            <!-- 面包屑项（支持点击跳转） -->
            <RouterLink 
              :to="item.path" 
              class="breadcrumb-item"
            >
              {{ item.title }}
            </RouterLink>
            <!-- 分隔符（最后一项后不显示） -->
            <strong v-if="index < breadcrumbList.length - 1" class="breadcrumb-separator"> / </strong>
          </span>
        </div>


        </div>
        <div class="list-content">
          <RouterView />
        </div>
       </div>
     </div>
</template>

<style scoped>
.main{
  display: flex;
  background-color: #fafafa;
  height: calc(100vh - 64px); /* 视口高度 - Header 高度 */
}
.list-top {
  line-height: 66px;
  height: 66px;
  display: flex;
  align-items: center;
}
.pet-list {
  flex: 1;
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  height: 100%; /* 继承 main 的高度 */
}

/* 面包屑容器样式 */
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 22px; /* 字体大小匹配图中效果 */
}
/* 面包屑项样式（蓝色文字） */
.breadcrumb-item {
  color: #4077FB; /* 与图中蓝色一致 */
  text-decoration: none; /* 去掉RouterLink默认下划线 */
  font-weight: bold; /* 加粗匹配图中效果 */
}
/* 面包屑分隔符样式 */
.breadcrumb-separator {
  margin: 0 4px; /* 分隔符两侧间距 */
  color: #4077FB; /* 分隔符颜色与文字一致 */
}

.list-content {
  position: relative;
  margin-top: 12px;
  margin-left: 16px;
  padding: 0 16px;
  margin-right: 16px;
  height: 88%;
  overflow-y: auto; /* 内容超出时垂直滚动 */
  background-color: #fff;
}

/* 美化滚动条 */
.list-content::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}
.list-content::-webkit-scrollbar-thumb {
  background-color: #e5e5e5; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}
.list-content::-webkit-scrollbar-track {
  background-color: #fafafa; /* 滚动条轨道背景 */
}
</style>